<template>
  <div tags-container>
    <v-container>
      <!-- 数据迭代器 -->
      <v-data-iterator :items="items" :page="page">
        <template #header>
          <!-- 数据筛选器 -->
          <v-card image="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg" variant="tonal" height="100"
            class="d-flex flex-column justify-center align-center">
            <v-toolbar class="text-white" image="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
            :elevation="8">
              <v-btn icon="mdi-menu"></v-btn>
              <v-toolbar-title text="Toolbar"></v-toolbar-title>
              <v-spacer></v-spacer>
              <v-btn icon="mdi-export"></v-btn>
              <v-btn text="添加标签" prepend-icon="mdi-plus" @click="addTag"></v-btn>
          </v-toolbar>
          </v-card>
        </template>
        <template #default="{ items }">
          <template v-for="(item, i) in items" :key="i">
            <v-card v-bind="item.raw">
              <template #text>
                <v-text-field v-model="item.raw.text" />
              </template>
            </v-card>
          </template>
        </template>
        <template #footer>
          <!-- TODO: 可见分页可选大小 -->
          <v-pagination total-visible="6" :length="items.length" v-model="page"></v-pagination>
        </template>
      </v-data-iterator>
    </v-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(1)
const items = ref([
  {
    title: 'Item 1',
    text: '这是标签1',
  },
  {
    title: 'Item 2',
    text: '这是标签2',
  },
  {
    title: 'Item 3',
    text: '这是标签3',
  },
])
const filters = [
  { title: '框架' },
  { title: '工具库' },
  { title: '语言' },
  { title: '组件' },
]

// 添加标签函数
const addTag = () => {
  const newTagIndex = items.value.length + 1
  items.value.push({
    title: `Item ${newTagIndex}`,
    text: `这是标签${newTagIndex}`
  })
}
</script>

<style lang="less" scoped>
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
</style>
